<template>
  <client-only>
    <div class="app-cainter">
      <!-- 列表 -->
      <div class="box">
        <table border="2">
          <tr align="center">
            <th v-for="(th, i) in data" :key="i">{{ th }}</th>
          </tr>
          <tr v-for="item in list" :key="item.id" @click="goGameInfo(item.id)">
            <td><img :src="item.firstImg" :alt="item.name" width="90%" /></td>
            <td class="td">
              <p>{{ item.name }}</p>
            </td>
            <td class="td">
              <p>￥{{ item.price.toFixed(2) }}</p>
            </td>
            <td class="td">
              <p>{{ item.issueDate }}</p>
            </td>
            <td class="td">
              <p v-if="item.isBuy">已购买</p>
              <p v-else>未支付</p>
            </td>
            <td class="td">
              <a :href="`/gameCategory/${item.id}`">查看游戏详情</a>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </client-only>
</template>
<script>
import orderApi from "@/api/order";
import Cookie from "js-cookie";

export default {
  // 路由守卫
  middleware: "default",
  data() {
    return {
      list: [],
      data: ["游戏图片", "游戏名称", "价格", "发布时间", "购买状态", "操作"],
    };
  },
  created() {
    //   初始化数据
    this.init();
    // console.log(Cookie.get("gameMall_token"));
  },
  methods: {
    init() {
      const token = Cookie.get("gameMall_token");

      if (token) {
        let name = Cookie.get("userInfo");
        // console.log(name);
        if (name != null) {
          var i = JSON.parse(name);
        }
        orderApi.getList(i.userName).then((res) => {
          this.list = res.data;
          // console.log(this.list);
        });
      }
    },
    goGameInfo(gameId) {
      this.$router.push(`/gameCategory/${gameId}`);
    },
  },
};
</script>
<style scoped>
.app-cainter {
  background-color: #1b2838;
  padding: 50px 0;
}
/* 表格 */
table {
  width: 70%;
  height: auto;
  margin: 0 auto;
  text-align: center;
  color: #bfbdba;
}
th {
  padding-top: 10px;
  font-size: 22px;
  height: 30px;
}
th td {
  width: 150px;
  height: 100px;
  line-height: 100px;
}
table tr td {
  border-bottom: 1px solid #1b2838;
  font-size: 16px;
  width: 150px;
  height: 100px;
  line-height: 100px;
}
table tr:not(:nth-child(1)):hover {
  transition: 0.3s;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.2);
}
table img {
  vertical-align: middle;
}
table tr td p {
  height: 120px;
  line-height: 120px;
}
a {
  color: #bfbdba;
}
</style>